
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯CSS3漂亮的单选框和复选框样式</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.1/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/icheck-material.min.css" />
    <link rel="stylesheet" href="../css/icheck-material-custom.min.css" />
 
</head>
<body>
    <section class="container" style="padding: 50px 0">
        <h2 id="icheck-bootstrap">Material Design Palette</h2>
        <div class="row">
            <div class="col-md-3 col-sm-4 col-xs-6 demo-col">
                <div class="icheck-material-red">
                    <input type="checkbox" checked id="red" />
                    <label for="red">red</label>
                </div>
                <div class="icheck-material-red">
                    <input type="radio" id="red1" name="red" />
                    <label for="red1">red 1</label>
                </div>
                <div class="icheck-material-red">
                    <input type="radio" checked id="red2" name="red" />
                    <label for="red2">red 2</label>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6 demo-col">
                <div class="icheck-material-pink">
                    <input type="checkbox" checked id="pink" />
                    <label for="pink">pink</label>
                </div>
                <div class="icheck-material-pink">
                    <input type="radio" id="pink1" name="pink" />
                    <label for="pink1">pink 1</label>
                </div>
                <div class="icheck-material-pink">
                    <input type="radio" checked id="pink2" name="pink" />
                    <label for="pink2">pink 2</label>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6 demo-col">
                <div class="icheck-material-purple">
                    <input type="checkbox" checked id="purple" />
                    <label for="purple">purple</label>
                </div>
                <div class="icheck-material-purple">
                    <input type="radio" id="purple1" name="purple" />
                    <label for="purple1">purple 1</label>
                </div>
                <div class="icheck-material-purple">
                    <input type="radio" checked id="purple2" name="purple" />
                    <label for="purple2">purple 2</label>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6 demo-col">
                <div class="icheck-material-deeppurple">
                    <input type="checkbox" checked id="deeppurple" />
                    <label for="deeppurple">deeppurple</label>
                </div>
                <div class="icheck-material-deeppurple">
                    <input type="radio" id="deeppurple1" name="deeppurple" />
                    <label for="deeppurple1">deeppurple 1</label>
                </div>
                <div class="icheck-material-deeppurple">
                    <input type="radio" checked id="deeppurple2" name="deeppurple" />
                    <label for="deeppurple2">deeppurple 2</label>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6 demo-col">
                <div class="icheck-material-indigo">
                    <input type="checkbox" checked id="indigo" />
                    <label for="indigo">indigo</label>
                </div>
                <div class="icheck-material-indigo">
                    <input type="radio" id="indigo1" name="indigo" />
                    <label for="indigo1">indigo 1</label>
                </div>
                <div class="icheck-material-indigo">
                    <input type="radio" checked id="indigo2" name="indigo" />
                    <label for="indigo2">indigo 2</label>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6 demo-col">
                <div class="icheck-material-blue">
                    <input type="checkbox" checked id="blue" />
                    <label for="blue">blue</label>
                </div>
                <div class="icheck-material-blue">
                    <input type="radio" id="blue1" name="blue" />
                    <label for="blue1">blue 1</label>
                </div>
                <div class="icheck-material-blue">
                    <input type="radio" checked id="blue2" name="blue" />
                    <label for="blue2">blue 2</label>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6 demo-col">
                <div class="icheck-material-lightblue">
                    <input type="checkbox" checked id="lightblue" />
                    <label for="lightblue">lightblue</label>
                </div>
                <div class="icheck-material-lightblue">
                    <input type="radio" id="lightblue1" name="lightblue" />
                    <label for="lightblue1">lightblue 1</label>
                </div>
                <div class="icheck-material-lightblue">
                    <input type="radio" checked id="lightblue2" name="lightblue" />
                    <label for="lightblue2">lightblue 2</label>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6 demo-col">
                <div class="icheck-material-cyan">
                    <input type="checkbox" checked id="cyan" />
                    <label for="cyan">cyan</label>
                </div>
                <div class="icheck-material-cyan">
                    <input type="radio" id="cyan1" name="cyan" />
                    <label for="cyan1">cyan 1</label>
                </div>
                <div class="icheck-material-cyan">
                    <input type="radio" checked id="cyan2" name="cyan" />
                    <label for="cyan2">cyan 2</label>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6 demo-col">
                <div class="icheck-material-teal">
                    <input type="checkbox" checked id="teal" />
                    <label for="teal">teal</label>
                </div>
                <div class="icheck-material-teal">
                    <input type="radio" id="teal1" name="teal" />
                    <label for="teal1">teal 1</label>
                </div>
                <div class="icheck-material-teal">
                    <input type="radio" checked id="teal2" name="teal" />
                    <label for="teal2">teal 2</label>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6 demo-col">
                <div class="icheck-material-green">
                    <input type="checkbox" checked id="green" />
                    <label for="green">green</label>
                </div>
                <div class="icheck-material-green">
                    <input type="radio" id="green1" name="green" />
                    <label for="green1">green 1</label>
                </div>
                <div class="icheck-material-green">
                    <input type="radio" checked id="green2" name="green" />
                    <label for="green2">green 2</label>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6 demo-col">
                <div class="icheck-material-lightgreen">
                    <input type="checkbox" checked id="lightgreen" />
                    <label for="lightgreen">lightgreen</label>
                </div>
                <div class="icheck-material-lightgreen">
                    <input type="radio" id="lightgreen1" name="lightgreen" />
                    <label for="lightgreen1">lightgreen 1</label>
                </div>
                <div class="icheck-material-lightgreen">
                    <input type="radio" checked id="lightgreen2" name="lightgreen" />
                    <label for="lightgreen2">lightgreen 2</label>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6 demo-col">
                <div class="icheck-material-lime">
                    <input type="checkbox" checked id="lime" />
                    <label for="lime">lime</label>
                </div>
                <div class="icheck-material-lime">
                    <input type="radio" id="lime1" name="lime" />
                    <label for="lime1">lime 1</label>
                </div>
                <div class="icheck-material-lime">
                    <input type="radio" checked id="lime2" name="lime" />
                    <label for="lime2">lime 2</label>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6 demo-col">
                <div class="icheck-material-yellow">
                    <input type="checkbox" checked id="yellow" />
                    <label for="yellow">yellow</label>
                </div>
                <div class="icheck-material-yellow">
                    <input type="radio" id="yellow1" name="yellow" />
                    <label for="yellow1">yellow 1</label>
                </div>
                <div class="icheck-material-yellow">
                    <input type="radio" checked id="yellow2" name="yellow" />
                    <label for="yellow2">yellow 2</label>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6 demo-col">
                <div class="icheck-material-amber">
                    <input type="checkbox" checked id="amber" />
                    <label for="amber">amber</label>
                </div>
                <div class="icheck-material-amber">
                    <input type="radio" id="amber1" name="amber" />
                    <label for="amber1">amber 1</label>
                </div>
                <div class="icheck-material-amber">
                    <input type="radio" checked id="amber2" name="amber" />
                    <label for="amber2">amber 2</label>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6 demo-col">
                <div class="icheck-material-orange">
                    <input type="checkbox" checked id="orange" />
                    <label for="orange">orange</label>
                </div>
                <div class="icheck-material-orange">
                    <input type="radio" id="orange1" name="orange" />
                    <label for="orange1">orange 1</label>
                </div>
                <div class="icheck-material-orange">
                    <input type="radio" checked id="orange2" name="orange" />
                    <label for="orange2">orange 2</label>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6 demo-col">
                <div class="icheck-material-deeporange">
                    <input type="checkbox" checked id="deeporange" />
                    <label for="deeporange">deeporange</label>
                </div>
                <div class="icheck-material-deeporange">
                    <input type="radio" id="deeporange1" name="deeporange" />
                    <label for="deeporange1">deeporange 1</label>
                </div>
                <div class="icheck-material-deeporange">
                    <input type="radio" checked id="deeporange2" name="deeporange" />
                    <label for="deeporange2">deeporange 2</label>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6 demo-col">
                <div class="icheck-material-brown">
                    <input type="checkbox" checked id="brown" />
                    <label for="brown">brown</label>
                </div>
                <div class="icheck-material-brown">
                    <input type="radio" id="brown1" name="brown" />
                    <label for="brown1">brown 1</label>
                </div>
                <div class="icheck-material-brown">
                    <input type="radio" checked id="brown2" name="brown" />
                    <label for="brown2">brown 2</label>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6 demo-col">
                <div class="icheck-material-grey">
                    <input type="checkbox" checked id="grey" />
                    <label for="grey">grey</label>
                </div>
                <div class="icheck-material-grey">
                    <input type="radio" id="grey1" name="grey" />
                    <label for="grey1">grey 1</label>
                </div>
                <div class="icheck-material-grey">
                    <input type="radio" checked id="grey2" name="grey" />
                    <label for="grey2">grey 2</label>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6 demo-col">
                <div class="icheck-material-bluegrey">
                    <input type="checkbox" checked id="bluegrey" />
                    <label for="bluegrey">bluegrey</label>
                </div>
                <div class="icheck-material-bluegrey">
                    <input type="radio" id="bluegrey1" name="bluegrey" />
                    <label for="bluegrey1">bluegrey 1</label>
                </div>
                <div class="icheck-material-bluegrey">
                    <input type="radio" checked id="bluegrey2" name="bluegrey" />
                    <label for="bluegrey2">bluegrey 2</label>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6 demo-col">
                <div class="icheck-material-custom">
                    <input type="checkbox" checked id="custom" />
                    <label for="custom">custom</label>
                </div>
                <div class="icheck-material-custom">
                    <input type="radio" id="custom1" name="custom" />
                    <label for="custom1">custom 1</label>
                </div>
                <div class="icheck-material-custom">
                    <input type="radio" checked id="custom2" name="custom" />
                    <label for="custom2">custom 2</label>
                </div>
            </div>
        </div>
    </section>
    
</body>
</html>